<template>
<div class="channel-edit">
    <van-cell title="我的频道" :border="false">
      <van-button
        size="small"
        round
        type="danger"
        plain
        @click="isEditShow=!isEditShow"
      >
        {{isEditShow?'完成':'编辑'}}
      </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        :class="{showClose:isEditShow && index!==0}"
        v-for="(item,index) in myChannels"
        :key="index"
        icon="close"
        @click="onMyChannelClick(item,index)"
      >
        <span slot="text" class="text" :style="{color:index===active?'red':'black'}">{{item.name}}</span>
      </van-grid-item>
    </van-grid>
    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid class="recommend-grid" :gutter="10">
        <van-grid-item
          class="channel-item"
          v-for="(item,index) in recommendChannels"
          :key="index"
          icon="plus" @click="addChannel(item)">
            <span class="text" slot="text">{{item.name}}</span>
          </van-grid-item>
      </van-grid>
  </div>
</template>

<script>
// 计算属性：
// 1. 表达式太繁琐
// 2. 我们要的数据是依赖于另一个数据的计算结果，比如data中有一个数组，我们要的是数组长度

// 数据持久化：
// 1. 不登录 老年 本地存储
// 2. 登录 后台数据库中 登录的好处是换台手机数据是同步
import { mapState } from 'vuex'
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel'
import { setItem } from '@/utils/storage'

export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEditShow: false
    }
  },
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      // 在公司里用for，不要用这么高级的语法 push
      // return this.allChannels.filter(item => {
      //   return !this.myChannels.find(item1 => item1.id === item.id)
      // })
      return this.allChannels.filter(item => !this.myChannels.find(item1 => item1.id === item.id))
    }
  },
  watch: {},
  created () {
    this.getAllChannels()
  },
  mounted () {},
  methods: {
    onMyChannelClick (item, index) {
      if (this.isEditShow) {
        // 删除
        // 如果你删除的这一项在active的前面，错了一位
        if (index === 0) return// 推荐不能删除的
        if (this.active > index) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.myChannels.splice(index, 1)
        // 删除持久化
        this.deleteChannel(item)
      } else {
        // 频道切换
        // this.active = index
        // 子向父传值 因为active是属于父组件
        this.$emit('update-active', index)
      }
    },
    async deleteChannel (channel) {
      if (this.user) {
        // 已登录
        try {
          await deleteUserChannel(channel.id)
        } catch (err) {
          console.log(err)
        }
      } else {
        // 未登录
        // 未登录，将数据存储到本地
        setItem('channles', this.myChannels)
      }
    },
    async addChannel (channel) {
      this.myChannels.push(channel)
      if (this.user) {
        // 用api接口
        try {
          await addUserChannel({
            id: channel.id, // 频道 id
            seq: this.myChannels.length // 频道的 序号
          })
        } catch (err) {
          console.log(err)
        }
      } else {
        // 用本地存储
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    },
    async getAllChannels () {
      try {
        const res = await getAllChannels()
        this.allChannels = res.data.data.channels
        console.log(this.allChannels)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  .channel-item {
    height: 86px;
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      .van-grid-item__text {
        color: #222;
        font-size: 28px;
      }
    }
  }
}
/deep/ .recommend-grid {
    .van-grid-item__content {
        flex-direction: row;
        color: #222;
        .van-icon {
            font-size: 24px;
        }

        .van-grid-item__text {
            font-size: 28px;
            margin-top: 0;
        }
    }
}
/deep/ .van-icon-close {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 36px;
    color: #ccc;
}
.channel-edit{
  padding-top:80px;
}
.van-button{
  padding:20px 40px;
}
.text{
  font-size:14px;
}

// 默认隐藏的
.channel-item /deep/ .van-icon-close{
  display: none;
}
.showClose /deep/ .van-icon-close{
  display: inline-block;
}
</style>
